<!--
 * @Author: ChaiHongJun
 * @Date: 2021-07-24 14:18:30
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-07-24 20:14:35
 * @version: 
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios拦截器 interceptors</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">axios拦截器 interceptors</h2>
      <button class="btn btn-primary" type="button">GET</button>
      <button class="btn btn-warning" type="button">POST</button>
      <button class="btn btn-success" type="button">PUT</button>
      <button class="btn btn-danger" type="button">DELETE</button>
      <div class="card">
        <!-- <div class="card-body">
          <p>axios 响应的返回对象包含如下几个对象</p>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">config (请求配置)</li>
            <li class="list-group-item">headers (响应头)</li>
            <li class="list-group-item">data (响应的数据，也就是body)</li>
            <li class="list-group-item">request (XMLHttpRequest 原生对象)</li>
            <li class="list-group-item">status (响应状态码)</li>
            <li class="list-group-item">statusText (响应状态字符串)</li>
          </ul>
        </div> -->
        <hr />
        <div class="card-body">
          <p>分别点击 控制台显示：</p>
          <p>请求拦截器</p>
          <p>响应拦截器</p>
          <p>
            {data: {…}, status: 200, statusText: "", headers: {…}, config:
            {…}, …}
          </p>
          <p>请求拦截器</p>
          <p>响应拦截器</p>
          <p>
            {data: {…}, status: 200, statusText: "", headers: {…}, config:
            {…}, …}
          </p>
        </div>
        <div class="card-body">
          <p>如果定义多个【请求拦截器】，则【最后一个】定义的先执行（倒序）</p>
          <p>如果定义多个【响应拦截器】，则【第一个】定义的先执行（正序）</p>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  window.addEventListener("load", () => {
    const buttons = document.querySelectorAll("button");
    // 创建实例
    const instance = axios.create({
      baseURL: "https://api.apiopen.top",
      timeout: 3000,
    });
    // 请求拦截器
    instance.interceptors.request.use(
      (config) => {
        /* 对发送请求前，先对请求配置做点什么 */
        console.log("请求拦截器");
        return config;
        // throw "请求出错";
      },
      (error) => {
        // 出错
        return Promise.reject(error);
      }
    );
    //响应拦截器
    instance.interceptors.response.use(
      (response) => {
        /* 对返回的响应先做点什么 */
        console.log("响应拦截器");
        return response;
      },
      (error) => {
        //  出错
        console.log("error", error);
        return Promise.reject(error);
      }
    );
    // config
    let methods = ["GET", "POST"];
    let url = ["/getJoke", "/getImages"];
    let data = {
      page: 1,
      count: 10,
    };
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", () => {
        instance({
          method: methods[i],
          url: url[i],
          data: i ? data : null,
        }).then((response) => {
          console.log(response);
        });
      });
    }
  });
</script>
